/****************
 *@description: 
 *@author: Xhd
 *@API: 
 *@date: 2023-12-13 09:31:42
 *@version: V1.0.0
*************************************************************************/

import React, { useEffect, useState, useRef } from "react";
import { ProFormDateRangePicker, ProTable } from '@ant-design/pro-components';
import TheButton from "@/components/TheButton/index.jsx";
import GoBack from "@/components/TheGoBack";
import { useLocation } from 'react-router-dom';
import { apiGetMemberCouponPage, apiGetMemberCouponList } from "@/api/couponManagement/index.js";
import Json2Excel from '@/utils/Json2Excel.js';

const Receipt = (props) => {
  const actionRef = useRef()
  const location = useLocation()
  const title = "领取记录"
  const couponId = location.state.couponId
  const [total, setTotal] = useState(0)
  const columns = [
    {
      title: "用户ID",
      dataIndex: "memberId",
      key: "memberId",
      // fieldProps: {
      //   maxLength: 8
      // }
    },
    {
      title: "用户昵称",
      dataIndex: "memberName",
      key: "memberName",
    },
    {
      title: "手机号",
      dataIndex: "memberMobile",
      key: "memberMobile",
    },
    {
      title: "领取时间",
      dataIndex: "createTime",
      key: "createTime",
      renderFormItem: () => {
        return <ProFormDateRangePicker
          formItemProps={{
            className: 'form-rangePicker-w',
          }}
        />
      },
    },
    {
      title: "使用时间/过期时间",
      dataIndex: "couponStatus",
      key: "couponStatus",
      render: (text, record) => {
        if (record.couponStatus === 'Y') {
          return <div className="p-white-space" >{record.endTime}</div>
        } else if (record.couponStatus === 'N') {
          return <div className="p-white-space" >{record.verificationTime}</div>
        } else if (record.couponStatus === 'G') {
          return <div className="p-white-space" >{record.endTime}</div>
        }

      }
    },
  ]

  const toExport = async () => {
    await apiGetMemberCouponList({ couponId }).then(res => {
      let data = []
      res.data.forEach(item => {
        data.push({
          memberId: item.memberId ? item.memberId : '/',
          memberName: item.memberName ? item.memberName : '/',
          memberMobile: item.memberMobile ? item.memberMobile : '/',
          createTime: item.createTime ? item.createTime : '/',
          verificationTime: item.verificationTime ? item.verificationTime : '/',
          endTime: item.endTime ? item.endTime : '/',
          couponStatus: item.couponStatus ? item.couponStatus === "Y" ? "未使用" : item.couponStatus === "N" ? "已使用" : item.couponStatus === "G" ? "已过期" : "/" : '/'
        })
      })
      const option = {
        fileName: '用户列表',
        header: [
          {
            title: '用户列表',
            prop: '',
            children: [
              {
                title: '用户ID',
                prop: 'memberId',
              },
              {
                title: '用户昵称',
                prop: 'memberName',
              },
              {
                title: '手机号',
                prop: 'memberMobile',
              },
              {
                title: '领取时间',
                prop: 'createTime',
              },
              {
                title: '使用时间',
                prop: 'verificationTime',
              },
              {
                title: '过期时间',
                prop: 'endTime',
              },
              {
                title: '使用状态',
                prop: 'couponStatus',
              },
            ]
          },
        ],

        dataSource: data
      }
      Json2Excel(option)
    })
  }

  return (<div className="wrap-box">
    <GoBack title={title} />
    <div style={{ marginTop: "5px" }}>
      <div style={{ margin: "10px 0", fontSize: 16, fontWeight: 600 }}>用户列表（{total}）</div>
      {total > 0 ? <TheButton type="link" onClick={toExport} >Excel导出</TheButton> : null}
    </div>
    <ProTable
      actionRef={actionRef}
      scroll={{ x: "max-content", y: '57vh' }}
      rowKey={(record) => record.memberId}
      bordered={true}
      options={false}
      columns={columns}
      pagination={{
        defaultPageSize: 10,
        position: ['bottomCenter'],
        showSizeChanger: false
      }}
      request={async (params) => {
        // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
        // 如果需要转化参数可以在这里进行修改
        const res = await apiGetMemberCouponPage({
          pageNo: params.current,
          pageSize: params.pageSize,
          couponId,
          couponStatus: ""
        });
        setTotal(res.totalCount)
        return {
          data: res.data,
          // success 请返回 true，
          // 不然 table 会停止解析数据，即使有数据
          success: res.code === 0,
          // 不传会使用 data 的长度，如果是分页一定要传
          total: res.totalCount,
        };
      }}
      search={false}
    />
  </div>)
}

export default Receipt
